<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>忘记密码</title>
    <!-- Bootstrap -->
    <link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container" >
    <div id="errorDiv" class="bg-info"></div>
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" >

                <!--<div class="form-group">
                    <label  class="col-sm-2 control-label">邮箱:</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input type="text" name="mail" class="form-control" id="mail" placeholder="请输入邮箱" onblur="cheCkMail(this.value)">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" onclick="sendMail()" id="objButton">发送邮箱</button>
                            </span>
                        </div>
                    </div>
                    <div id="mailTip"></div>
                </div>-->
                <div class="form-group">
                    <label  class="col-sm-2 control-label">邮箱:</label>
                    <div class="col-sm-4">
                        <input type="text" name="mail" class="form-control" id="mail" placeholder="请输入邮箱" onblur="cheCkMail(this.value)">
                    </div>
                    <div id="mailTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">图片验证码:</label>
                    <div class="col-sm-5">
                        <div class="input-group">
                            <input type="text" name="code" class="form-control" id="code" placeholder="请输入图片验证码" >
                                <span class="input-group-btn" id="imageCodeDiv">

                                </span>
                                <span class="input-group-btn">
                                    <button  type="button" class="btn btn-link" onclick="initCode()" >看不清：换一张</button>
                                </span>
                        </div>
                    </div>
<!--                    <input type="text" id="uuidTip"></input>-->
                </div>


                <div style="text-align: center;">
                    <button type="button" class="btn btn-primary" id="regButton" onclick="forgetPassword()" >找回密码</button>
                    <button type="reset" class="btn btn-default">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<!--引入封装好的cookie-->
<script src="../js/jquery.cookie.min.js"></script>

<script src="../js/common.js"></script>
</body>

<script>

    // 初始化函数
    $(function (){
        //初始化验证码
        initCode();
    })
    //全局变量

    let q_format_success="√";
    let q_error={};


    //初始化验证码
    function initCode(){
        var v_uuid=$.cookie("uuid");  //$("#uuidTip").val();
       $.get({
           type:"get",
           url:server_url+"/code",
           data:{"uuid":v_uuid},
           success:function (res){
               if(res.code==200){
                   // alert(res.code)
                   let imageBase64=res.data.imageBase64;
                   $("#imageCodeDiv").html('<img src="data:image/jpg;base64,'+imageBase64+'"/>');
                    // $("#uuidTip").val(res.data.uuid)
                   $.cookie("uuid",res.data.uuid);
               }
           }
       })

    }


    /**
     * 验证邮箱是否存在
     * @param mail
     */
    function cheCkMail(mail){
        if(mail==null||mail==""){
            $("#mailTip").html("<span style='color: red'><b>请输入邮箱</b></span>")
        }else{
            $.ajax({
                type:"get",
                data:{"mail":mail},
                url:server_url+"/member/mailboxDoesNotExist",
                success:function (result){
                    if(result.code==200){
                        $("#mailTip").html("<span style='color: #00B83F'><b>"+q_format_success+"</b></span>")
                        delete q_error["mail"];
                    }else if(result.code==5110){
                        $("#mailTip").html("<span style='color: red'><b>"+result.msg+"</b></span>")
                        q_error["mail"]=result.msg;
                    }
                    validate();
                }
            })
        }
    }


    /**
     * 发送邮箱按钮倒计时
     */
    function count(){
        q_count_second--;
        if(q_count_second==0){
            $("#objButton").removeAttr("disabled","disabled");
            $("#objButton").html("发送验证码");
            q_count_second=60;
            return;
        }
        $("#objButton").html("倒计时"+q_count_second+"秒")
        setTimeout(function (){
            count();
        },1000)

    }

    let q_count_second=60;
    /**
     * 发送邮箱
     */
    function sendMail(){
        // 获取邮箱
        var mail = $("#mail").val().trim();
        if(mail.length==0){
            q_error["mail"]="<span style='color: red'><b>请输入邮箱</b></span>";
            $("#mailTip").html("<span style='color: red'><b>请输入邮箱</b></span>");
            $("#objButton").attr("disabled","disabled");
            return;
        }
        $("#objButton").attr("disabled","disabled");
        $("#objButton").html("倒计时6秒");
        count();
        $.post({
            data:{"mail":mail},
            url:server_url+"/sms/sendEmail",
            success:function(rs){
                if(rs.code==200){
                    alert("发送成功，请修改！");
                }
            },
            error:function(){
                alert("发送请求异常");
            }
        })
    }

    /**
     * 忘记密码
     */
    function forgetPassword(){
        var param = {};
        // 获取邮箱
        param.mail = $("#mail").val().trim();
        // 获取验证码
        param.code = $("#code").val().trim();
        //获取uuid
        param.uuid=$.cookie("uuid");
        console.log(param);
        $.post({
            data:param,
            url:server_url+"/member/forgetPassword",
            success:function(result){
                if(result.code==200){
                    alert("修改成功，请登录！");
                    location.href = "login.html";
                }else if(result.code!=200){
                    alert(result.msg);
                }
            },
            error:function(){
                alert("发送请求失败");
            }
        })

    }

    /**
     *如果输入格式正确才会取消注册按钮禁用状态
     */
    function validate(){
        var v_res=[];
        for (var x in q_error) {
            v_res.push(q_error[x]);
        }
        if(v_res.length>0){
            $("#regButton").attr("disabled","disabled"); //将按钮禁用
            let v_html="";
            for(let r of v_res){
                v_html +="<li style='color: red'>"+r+"</li>"
            }
            $("#errorDiv").html(v_html);
        }else {
            $("#regButton").removeAttr("disabled");
            $("#errorDiv").html("");
        }

    }
</script>

</html>
